<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeautyPlus管理系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.min.css">
    <!-- jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        :root {
            --primary: #ff6b9d;
            --secondary: #a16ae8;
            --accent: #ffb367;
            --light: #fff5f7;
            --dark: #333333;
            --success: #5cdb95;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }

        .sidebar {
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            background: linear-gradient(180deg, var(--primary), var(--secondary));
            color: white;
            padding: 20px 0;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .sidebar .logo {
            padding: 0 20px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }

        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.8);
            padding: 12px 20px;
            margin: 5px 10px;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .sidebar .nav-link:hover, 
        .sidebar .nav-link.active {
            color: white;
            background: rgba(255, 255, 255, 0.15);
        }

        .sidebar .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .main-content {
            margin-left: 250px;
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: white;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .content-area {
            flex: 1;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .page-title {
            font-weight: 600;
            color: var(--dark);
            margin: 0;
        }

        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
        }

        .stats-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .stats-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 1.5rem;
        }

        .welcome-banner {
            background: linear-gradient(135deg, #ffccd5, #cdb4db);
            border-radius: 10px;
            padding: 25px;
            color: white;
            margin-bottom: 25px;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="logo">
            <h3 class="mb-0 text-white"><i class="fas fa-crown me-2"></i>BeautyPlus</h3>
            <small>管理系统</small>
        </div>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#" data-page="dashboard">
                    <i class="fas fa-home"></i> 仪表板
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="products">
                    <i class="fas fa-box-open"></i> 商品管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="clothing">
                    <i class="fas fa-tshirt"></i> 服装管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="food">
                    <i class="fas fa-utensils"></i> 美食推荐
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="outfit">
                    <i class="fas fa-user-friends"></i> 穿搭指南
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="bloggers">
                    <i class="fas fa-blog"></i> 博主管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="entertainment">
                    <i class="fas fa-glass-cheers"></i> 吃喝玩乐
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="users">
                    <i class="fas fa-users"></i> 用户管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-page="settings">
                    <i class="fas fa-cog"></i> 系统设置
                </a>
            </li>
        </ul>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 头部 -->
        <div class="header">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="page-title">仪表板</h4>
                <nav aria-label="breadcrumb" class="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="#">首页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">仪表板</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <iframe id="contentFrame" src="./dashboard.html"></iframe>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // 侧边栏导航点击事件
            $('.sidebar .nav-link').on('click', function(e) {
                e.preventDefault();
                
                // 更新激活状态
                $('.sidebar .nav-link').removeClass('active');
                $(this).addClass('active');
                
                // 更新页面标题
                $('.page-title').text($(this).text().trim());
                
                // 获取页面标识
                const page = $(this).data('page');
                
                // 更新iframe内容
                updateIframeContent(page);
            });
            
            // 根据页面标识更新iframe内容
            function updateIframeContent(page) {
                let content = '';
                
                switch(page) {
                    case 'dashboard':
                        content = `./dashboard.html`;
                        break;
                        
                    case 'products':
                        content = `./products.html`;  break;
                        
                    case 'clothing':
                        content = `./clothing.html`;  break;
                        
                    case 'food':
                      content = `./food.html`;   break;
                        
                    case 'outfit':
                      content = `./outfit.html`;   break;
                        
                    case 'bloggers':
                        content = `./bloggers.html`;  break;
                        
                    case 'entertainment':
                       content = `./entertainment.html`; break;
                        
                    default:
                   content = `./default.html`;  }
                
                // 更新iframe内容
                const iframe = document.getElementById('contentFrame');
                iframe.src = content;
            }
        });
    </script>
</body>
</html>